<template>
    <div>
      价格<input type="text" name="" v-model="page.start" id="">-
       <input type="text" name="" v-model="page.end" id="">
       <input type="button" value="查询" @click="show">
       <input type="button" value="价格升序" @click="order('asc')">
       <input type="button" value="价格降序" @click="order('desc')">
<table>
<thead>
  <tr>
    <td>
      <input type="checkbox" name="" @click="all" id="" v-model="select">
    </td>
    <td>房号</td>
    <td>价格</td>
    <td>图片</td>
    <td>状态</td>
    <td>逻辑删除</td>
    <td>操作</td>
  </tr>
</thead>
<tbody>
  <tr v-for="a in date">
    <td>
      <input type="checkbox" name=""    :value="a.id"  id="" v-model="ids">
    </td>
    <td>{{a.name}}</td>
    <td>{{ a.price }}</td>
    <td>
      <img :src="'https://localhost:7113/'+a.img" width="200px" height="100px">
    </td>
    <td>{{a.state?"空闲":"已预订"}}</td>
    <td>{{ a.isdel }}</td>
    <td>
      <a :href="'https://localhost:7113/'+a.img">查看图片</a>
      <input type="button" value="逻辑删除" @click="del()">
      <input type="button" value="修改" @click="find(a.id)">
    </td>
  </tr>
</tbody>
</table>
<input type="button" value="首页" @click="fan(1)">
<input type="button" value="上一页" @click="fan(2)">
<input type="button" value="下一页" @click="fan(3)">
<input type="button" value="尾页" @click="fan(4)">
当前第{{page.pagenow  }}页  共{{count.pagecount  }}页   每页{{ page.pagehang }}行  共{{count.count  }}条数据

    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route=useRoute()
const router=useRouter()
const select=ref(false)
const ids=ref([0])

const all=()=>{
if(!select.value){

  for (let index = 0; index <date.value.length; index++) {
      ids.value.push(date.value[index].id)
    
  }

}else{
  ids.value=[0]
}

}
const find=(vid:any)=>{
 router.push({path:"/update",query:{id:vid}})

}
const del=()=>{
  axios.get('https://localhost:7113/api/House/Del',{params:{idstring:ids.value.toString()}}).then(res=>{
  
    if(res.data>0){
alert('成功')
show()
    }else{
      alert('失败')
    }

})

}
const order=(val:any)=>{
page.value.desc=val
show()

}
const fan=(a:any)=>{
if(a==1){
    page.value.pagenow=1
    show()
}
if(a==2){
    if(page.value.pagenow>1){
        page.value.pagenow-=1
        show()
    }
   
}
if(a==3){
    if(page.value.pagenow<count.value.pagecount){
        page.value.pagenow+=1
        show()
    }
   
}
if(a==4){
    page.value.pagenow=count.value.pagecount
    show()
}
}
onMounted(()=>{
show()
})


const show=()=>{


axios.get('https://localhost:7113/api/House/Show',{params:page.value}).then(res=>{
  date.value=res.data.list
count.value.count=res.data.count
count.value.pagecount=Math.ceil(count.value.count/page.value.pagehang)

})
}



const count=ref({
  count:0,
  pagecount:0
})
const page=ref({
pagenow:1,
pagehang:2,
desc:"asc",
start:0,
end:0
})
const date=ref([{
  "id": 8,
      "name": "",
      "price": 0,
      "isDeposit": true,
      "deposit": 0,
      "extraBed": 0,
      "extraBedPrice": 0,
      "img": "string",
      "state": true,
      "tid": 0,
      "isdel": false
}])
</script>

<style scoped>

</style>